<template>
  <label class="ai-checkbox" :class="{'ai-checkbox--checked': innerChecked, 'ai-checkbox--disabled': disabled}">
    <view type="checkbox" class="ai-checkbox-input" :checked="innerChecked" :disabled="disabled" @click="onchange"></view>
    <text class="ai-checkbox-text">{{text}}</text>
  </label>
</template>

<script>
  export default {
    name:"ai-checkbox",
    emits: ["change", "update:checked"],
    props: {
      text: String,
      value: [String, Number],
      checked: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        innerChecked: false
      };
    },
    watch: {
      checked: {
        handler: function(n, o) {
          this.innerChecked = n
        },
        immediate: true
      }
    },
    methods: {
      onchange() {
        if (this.disabled) {
          return
        }
        let checked = !this.innerChecked
        let value = this.value
        this.innerChecked = checked
        this.$emit("change", {checked, value})
        this.$emit("update:checked", checked)
      }
    },
  }
</script>

<style lang="scss">
@import "@/styles/_radio_checkbox.scss"
</style>